<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css shapes</title>
    <style>
    img {
        float: left;
        width: 150px;
        margin-right: 1em;
        
        /* shape-outside: circle(); */

        /* shape-outside: ellipse() */

        shape-outside: polygon(0px 200px,119px 0px, 164px 200px)
    }

    p {
        margin: 10px 0;
    }
    </style>
</head>
<body>
    <h1>css shapes</h1>
    <p>自定义内容显示区域或形状。</p>
    <img src="./img/gril.png" alt="gril.png">

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima cupiditate consequuntur suscipit officiis facere culpa magnam eaque odit ex? Officia, ad autem! In maiores autem dolorum, exercitationem dolore nesciunt repellendus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima cupiditate consequuntur suscipit officiis facere culpa magnam eaque odit ex? Officia, ad autem! In maiores autem dolorum, exercitationem dolore nesciunt repellendus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima cupiditate consequuntur suscipit officiis facere culpa magnam eaque odit ex? Officia, ad autem! In maiores autem dolorum, exercitationem dolore nesciunt repellendus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima cupiditate consequuntur suscipit officiis facere culpa magnam eaque odit ex? Officia, ad autem! In maiores autem dolorum, exercitationem dolore nesciunt repellendus.</p>

    <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside">MOZ shape-outside</a>
    <a href="https://www.youtube.com/watch?v=pOB75oTNhw0">Obliterate Boxiness with css shapes</a>

</body>
</html>